<template>
  <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" range-key="name" :range="multiArray">
    <view class="picker">
      {{ multiStr || multiStrInversion }}
    </view>
  </picker>
</template>

<script>
var app = getApp()

/* eslint-disable */
const provinceList = 'https://nntapp.nndao.cc/api/im/region/lazy-list-street'
export default {
  props: {
    defaultLevel: {
      type: Number,
      default: 3
    },
    addressData: {
      type: Object,
      default() {
        return {}
      }
    },
    multiStrInversion: {
      type: String,
      default: '请选择省市区'
    }
  },
  data() {
    return {
      multiArray: [], //地址数据
      multiIndex: [0, 0, 0, 0], //当前下标
      multiStr: '' //选中的地址
    }
  },
  mounted() {
    this.getProvinceList()
  },
  methods: {
    //默认找北京
    async getProvinceList() {
      let province_name, city_name, area_name, street_name //省，市，区，街道
      let that = this

      await uni.request({
        url: `${provinceList}`, //仅为示例，并非真实接口地址。
        data: {
          parentCode: 0,
          type: 0
        },
        success: async r => {
          that.multiArray[0] = r.data.data //省
          let province_id = that.addressData.province_id

          let index1 = that.multiArray[0].findIndex(item => {
            return item.id == province_id
          })
          if (index1 < 0) index1 = 0
          // that.addressData.province_id = that.multiArray[0][0].id
          province_name = that.multiArray[0][index1].name

          await uni.request({
            url: `${provinceList}`, //仅为示例，并非真实接口地址。
            data: {
              parentCode: province_id || 1,
              type: 1
            },
            success: async r => {
              that.multiArray[1] = r.data.data //市
              let city_id = that.addressData.city_id
              // that.addressData.city_id = that.multiArray[1][0].id
              let index2 = that.multiArray[1].findIndex(item => {
                return item.id == city_id
              })
              if (index2 < 0) index2 = 0
              city_name = that.multiArray[1][index2].name

              await uni.request({
                url: `${provinceList}`, //仅为示例，并非真实接口地址。
                data: {
                  parentCode: city_id || 72,
                  type: 2
                },
                success: async r => {
                  that.multiArray[2] = r.data.data //区
                  let area_id = that.addressData.area_id
                  // that.addressData.area_id = that.multiArray[2][0].id
                  let index3 = that.multiArray[2].findIndex(item => {
                    return item.id == area_id
                  })
                  if (index3 < 0) index3 = 0
                  area_name = that.multiArray[2][index3].name

                  // that.multiStr = `${province_name},${city_name},${area_name}`
                }
              })
            }
          })
        }
      })
    },
    //选择触发
    async bindMultiPickerColumnChange(e) {
      let that = this
      //e.detail.column表示滑动的列
      that.multiIndex[e.detail.column] = e.detail.value
      let [provinceIndex, cityIndex, areaIndex, streetIndex] = [0, 0, 0, 0]
      let province_name, city_name, area_name, street_name
      switch (e.detail.column) {
        case 0: //拖动第1列
          if (that.multiIndex[0] === that.multiIndex[0]) {
            that.addressData.province_id = that.multiArray[0][e.detail.value].id
            province_name = that.multiArray[0][e.detail.value].name

            await uni.request({
              url: `${provinceList}`, //仅为示例，并非真实接口地址。
              data: {
                type: 1,
                parentCode: that.multiArray[0][e.detail.value].id
              },
              success: async r => {
                //改变第二列
                that.multiArray[1] = r.data.data
                that.addressData.city_id = that.multiArray[1][0].id
                city_name = that.multiArray[1][0].name
                provinceIndex = e.detail.value

                await uni.request({
                  url: `${provinceList}`, //仅为示例，并非真实接口地址。
                  data: {
                    type: 2,
                    parentCode: this.multiArray[1][e.detail.column].id
                  },
                  success: async r => {
                    //改变第三列
                    that.multiArray[2] = r.data.data
                    that.addressData.area_id = that.multiArray[2][0].id
                    area_name = that.multiArray[2][0].name

                    await uni.request({
                      url: `${provinceList}`, //仅为示例，并非真实接口地址。
                      data: {
                        type: 3,
                        parentCode: that.multiArray[2][e.detail.column].id
                      },
                      success: async r => {
                        //改变第四列
                        if (r.data.data.length == 0) {
                          that.multiArray.length > 3 ? that.multiArray.pop() : false
                          that.multiStr = `${province_name},${city_name},${area_name}`
                        } else {
                          that.multiArray[3] = r.data.data
                          that.addressData.street_id = that.multiArray[3][0].id
                          street_name = that.multiArray[3][0].name
                          that.multiStr = `${province_name},${city_name},${area_name},${street_name}`
                          console.log('area_name', area_name)
                        }
                        that.$emit('getRegions', { addressData: that.addressData, multiStr: that.multiStr })
                      }
                    })
                    that.multiIndex = [provinceIndex, 0, 0, 0]
                  }
                })
              }
            })
          }
          break
        case 1: //拖动第2列
          if (that.multiIndex[0] === that.multiIndex[0]) {
            if (that.multiIndex[1] === that.multiIndex[1]) {
              that.addressData.province_id = that.multiArray[0][that.multiIndex[0]].id
              province_name = that.multiArray[0][that.multiIndex[0]].name
              that.addressData.city_id = that.multiArray[1][e.detail.value].id
              city_name = that.multiArray[1][e.detail.value].name
              cityIndex = e.detail.value

              await uni.request({
                url: `${provinceList}`, //仅为示例，并非真实接口地址。
                data: {
                  type: 2,
                  parentCode: that.multiArray[1][e.detail.value].id
                },
                success: async r => {
                  that.multiArray[2] = r.data.data
                  that.addressData.area_id = that.multiArray[2][0].id
                  area_name = that.multiArray[2][0].name

                  await uni.request({
                    url: `${provinceList}`, //仅为示例，并非真实接口地址。
                    data: {
                      type: 3,
                      parentCode: that.multiArray[2][0].id
                    },
                    success: async r => {
                      //改变第四列

                      if (r.data.data.length == 0) {
                        that.multiArray.length > 3 ? that.multiArray.pop() : false
                        that.multiStr = `${province_name},${city_name},${area_name}`
                      } else {
                        that.multiArray[3] = r.data.data
                        that.addressData.street_id = that.multiArray[3][0].id
                        street_name = that.multiArray[3][0].name
                        that.multiStr = `${province_name},${city_name},${area_name},${street_name}`
                      }
                      that.$emit('getRegions', { addressData: that.addressData, multiStr: that.multiStr })
                    }
                  })
                  that.multiIndex = [that.multiIndex[0], cityIndex, 0, 0]
                }
              })
            }
          }
          break
        case 2: //拖动第3列
          if (that.multiIndex[0] === that.multiIndex[0]) {
            if (that.multiIndex[1] === that.multiIndex[1]) {
              if (that.multiIndex[2] === that.multiIndex[2]) {
                that.addressData.province_id = that.multiArray[0][that.multiIndex[0]].id
                province_name = that.multiArray[0][that.multiIndex[0]].name
                that.addressData.city_id = that.multiArray[1][that.multiIndex[1]].id
                city_name = that.multiArray[1][that.multiIndex[1]].name
                that.addressData.area_id = that.multiArray[2][e.detail.value].id
                area_name = that.multiArray[2][e.detail.value].name

                await uni.request({
                  url: `${provinceList}`, //仅为示例，并非真实接口地址。
                  data: {
                    type: 3,
                    parentCode: that.multiArray[2][e.detail.value].id
                  },
                  success: async r => {
                    //改变第四列
                    if (r.data.data.length == 0) {
                      that.multiArray.length > 3 ? that.multiArray.pop() : false
                      that.multiStr = `${province_name},${city_name},${area_name}`
                    } else {
                      that.multiArray[3] = r.data.data
                      that.addressData.street_id = that.multiArray[3][0].id
                      street_name = that.multiArray[3][0].name
                      that.multiStr = `${province_name},${city_name},${area_name},${street_name}`
                    }
                    that.$emit('getRegions', { addressData: that.addressData, multiStr: that.multiStr })
                  }
                })
                areaIndex = e.detail.value
                that.multiIndex = [that.multiIndex[0], that.multiIndex[1], areaIndex, 0]
              }
            }
          }
          break
        case 3: //拖动第4列
          if (that.multiIndex[0] === that.multiIndex[0]) {
            if (that.multiIndex[1] === that.multiIndex[1]) {
              if (that.multiIndex[2] === that.multiIndex[2]) {
                if (that.multiIndex[3] === that.multiIndex[3]) {
                  that.addressData.province_id = that.multiArray[0][that.multiIndex[0]].id
                  province_name = that.multiArray[0][that.multiIndex[0]].name
                  that.addressData.city_id = that.multiArray[1][that.multiIndex[1]].id
                  city_name = that.multiArray[1][that.multiIndex[1]].name
                  that.addressData.area_id = that.multiArray[2][that.multiIndex[2]].id
                  area_name = that.multiArray[2][that.multiIndex[2]].name
                  that.addressData.street_name = that.multiArray[3][e.detail.value].id
                  street_name = that.multiArray[3][e.detail.value].name

                  streetIndex = e.detail.value
                  that.multiIndex = [that.multiIndex[0], that.multiIndex[1], that.multiIndex[2], streetIndex]

                  that.multiStr = `${province_name},${city_name},${area_name},${street_name}`
                }
              }
            }
          }
          that.$emit('getRegions', { addressData: that.addressData, multiStr: that.multiStr })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.cu-form-group picker {
  flex: 1;
  padding-right: 40upx;
  overflow: hidden;
  position: relative;
}

.cu-form-group picker .picker {
  line-height: 100upx;
  font-size: 28upx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: right;
}

.cu-form-group picker::after {
  font-family: cuIcon;
  display: block;
  content: '\e6a3';
  position: absolute;
  font-size: 34upx;
  color: #8799a3;
  line-height: 100upx;
  width: 60upx;
  text-align: center;
  top: 0;
  bottom: 0;
  right: -20upx;
  margin: auto;
}
</style>
